/*
 * 公司列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-14 15:02:15
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.v-customer-company-index{
		.company-product-image{
			display: inline-block;
			width: 120px;
			height: 120px;
			position: relative;
			margin: 5px;
		}
		.product-thumb > img {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			max-width: 100%;
			max-height: 100%;
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="v-customer-company-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="company"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>

	</div>
</template>

<script>
import Button from 'iview/src/components/button';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'CompanyIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		company: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columnsList: [],
			columns: [
				{
					title: this.$t('company.name'),
					key: 'company_name',
					align: 'center',
					render: (h, { row }) => <div> { row.company_name || '-' } </div>,
				},
				{
					title: this.$t('company.product_sale'),
					key: 'product_price',
					align: 'center',
					render: (h, { row }) => <div> { row.product_price || '-' } </div>,
				},
				{
					title: this.$t('company.product_img'),
					key: 'product_image',
					align: 'center',
					render: (h, { row }) => {
						const thumb_imge = row.product_image ? <img src={ row.product_image } on-click={() => this.showPicture(row.product_image)} /> : this.$t('common.none');
						return (
							<div class="company-product-image">
								<div class="product-thumb">{ thumb_imge }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('company.product_desc'),
					key: 'description',
					align: 'center',
					render: (h, { row }) => <div> { row.description || '-' } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 150,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>),
				},
			], // 表格数据
		};
	},
	methods: {


	},
};
</script>
